<template>
  <div>
    <ul class="sub-nav">
      <li
        :class="{ active: defaultGroup === group.name }"
        :key="group.id"
        v-for="group in groups"
        @click="doActive(group)"
      >
        {{ group.name }}
      </li>
    </ul>
  </div>

  <div class="content">
    <div v-for="item in tableData" :key="item.data.name">
      <div>{{ item.data.name }}</div>
      <div><img style="width: 200px; height: 200px" :src="item.data.picurl" alt="" /></div>
      <div><audio controls :src="item.data.url"></audio></div>
    </div>

    <div
      @click="refresh"
      style="
        height: 60px;
        width: 60px;
        position: fixed;
        right: 150px;
        bottom: 150px;
        background-color: black;
        border-radius: 60px;
        color: white;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
      "
    >
      刷新
    </div>
  </div>
</template>

<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.sub-nav {
  display: flex;
  margin-left: 8rem;
  margin-top: 1rem;
}

.active {
  border-bottom: 1px solid #e0575b;
  font-size: 1.2rem;
}

.sub-nav li {
  height: 3rem;
  width: 6rem;
  line-height: 3rem;

  text-align: center;
  cursor: pointer;
}
.sub-nav li:hover {
  color: #e0575b;
}
</style>
<script setup>
import { ref, onMounted } from 'vue'

const groups = ref([
  {
    id: 'A',
    name: '热歌榜'
  },
  {
    id: 'B',
    name: '新歌榜',
    path: '/home/articles'
  },

  {
    id: 'C',
    name: '飙升榜'
  },

  {
    id: 'D',
    name: '抖音榜'
  },
  {
    id: 'E',
    name: '电音榜'
  }
])
const defaultGroup = ref('热歌榜')

const doActive = (group) => {
  defaultGroup.value = group.name
}
onMounted(() => {
  query()
})

const tableData = ref([])
const query = () => {
  fetch(`https://api.uomg.com/api/rand.music?sort=${defaultGroup.value}&format=json`)
    .then((respone) => respone.json())
    .then(function (data) {
      tableData.value.push(data)
    })
}

const refresh = () => {
  query()
}
</script>
